<template>
  <div class="ListOfTypes">
    <Box>
      <div slot="box">
        <div>
          <div style="padding-bottom: 15px">
            <a-button @click="add_type">添加类别</a-button>
          </div>
          <div>
            <CustomTable
              ref="table"
              :showAlert="false"
              :columns="columns"
              :dataSource="pageData"
              :showSelection="false"
              :showPagination="true"
              rowKey="id"
              :loading="loading"
              @change="onTableChange"
            >
              <template slot="state" slot-scope="text, record">
                <a-switch checked-children="开" un-checked-children="关" :checked="text == '1' ? true : false " default-checked @click="states(record)"/>
              </template>
              <template slot="operate" slot-scope="text, record">
                <a style="margin: 0 5px" href="javascript:;" @click="looks(record)">查看</a>
                <a style="margin: 0 5px" href="javascript:;" @click="revise(record)">编辑</a>
                <a style="margin: 0 5px" href="javascript:;" @click="deletes(record)">删除</a>
              </template>
            </CustomTable>
          </div>
        </div>
      </div>
    </Box>
    <div>
      <a-modal v-model="visible" title="添加类别" @ok="handleOk" width="600px" centered>
        <div>
          <a-form-model
            ref="ruleForm"
            :model="form"
            :rules="rules"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
          >
            <a-form-model-item ref="name" label="预案名称" prop="planName">
              <a-input v-model="form.planName" />
            </a-form-model-item>
            <a-form-model-item label="预案简述" prop="sketch">
              <a-input v-model="form.sketch" type="textarea" />
            </a-form-model-item>
          </a-form-model>
        </div>
      </a-modal>
    </div>
    <div>
      <a-modal v-model="visible1" title="预案类别" @ok="handleOk1" width="600px" centered>
        <div>
          <h2>{{ this.temporary.planName }}</h2>
          <div> <span>创建时间：{{ this.temporary.createTime }}</span> &emsp;&emsp;&emsp; <span>创建人：{{ this.temporary.createBy }}</span> </div>
          <p>{{ this.temporary.sketch }}</p>
        </div>
      </a-modal>
    </div>
    <div>
      <a-modal v-model="visible2" title="预案编辑" @ok="handleOk2" width="600px" centered>
        <div>
          <div>
            <a-form-model
              ref="ruleForm"
              :model="form"
              :rules="rules"
              :label-col="labelCol"
              :wrapper-col="wrapperCol"
            >
              <a-form-model-item ref="name" label="预案名称" prop="planName">
                <a-input v-model="form.planName" />
              </a-form-model-item>
            </a-form-model>
          </div>
        </div>
      </a-modal>
    </div>
  </div>
</template>

<script>
import Box from '@/views/xlgc/Box/index'
import CustomTable from '@/components/zxd/Table/CustomTable'
import { addType, deleteType, getTypeList, reviseType, stateTypr } from '@api/xlgc/plan'
export default {
  name: 'ListOfTypes',
  components: { Box, CustomTable },
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      other: '',
      form: {
        planName: '',
        sketch: ''
      },
      rules: {
        planName: [{ required: true, message: 'Please input Activity name', trigger: 'blur' }],
        sketch: [{ required: true, message: 'Please input activity form', trigger: 'blur' }]
      },
      pageFilter: {
        pageNo: 1,
        pageSize: 10
      },
      visible: false,
      visible1: false,
      visible2: false,
      temporary: {},
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          width: 60,
          align: 'center',
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` // 序号分页后连续
        },
        {
          title: '类别名称',
          dataIndex: 'planName',
          scopedSlots: { customRender: 'planName' }
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          scopedSlots: { customRender: 'createTime' }
        },
        {
          title: '创建人',
          dataIndex: 'createBy',
          scopedSlots: { customRender: 'createBy' }
          // customRender: (text,record) => {
          //   //字典值翻译通用方法
          //   return this.filterMultiDictText('cases_level', text)
          // }
        },
        {
          title: '状态',
          dataIndex: 'state',
          scopedSlots: { customRender: 'state' }
        },
        {
          title: '操作',
          width: 150,
          align: 'center',
          dataIndex: 'operate',
          scopedSlots: { customRender: 'operate' }
        }
      ],
      pageData: {},
      loading: false
    }
  },
  mounted() {
    this.refreshTable(this.pageFilter)
  },
  methods: {
    success() {
      this.$message.success(
        '添加成功',
        3
      )
    },
    deletes(val) {
      console.log(val)
      let arr = []
      arr.push(val.id)
      deleteType(arr).then(res => {
        console.log(res)
        if (res.success) {
          this.refreshTable(this.pageFilter)
          arr = []
        } else {
          this.$message.warn('出现了不可预测的问题！')
          arr = []
        }
      }).catch(e => {
        arr = []
        this.loading = false
        this.$message.warn('请求失败！')
      })
    },
    revise(val) {
      this.visible2 = true
      this.form = val
    },
    looks(record) {
      this.visible1 = true
      console.log(record)
      this.temporary = record
    },
    add_type() {
      this.visible = true
    },
    handleOk2(e) {
      let data = {
        id: this.form.id,
        planName: this.form.planName
      }
      reviseType(data).then(res => {
        console.log(res)
        this.visible2 = false
        this.success()
        this.refreshTable(this.pageFilter)
      }).catch(e => {
        this.loading = false
        this.$message.warn('请求失败！')
      })
    },
    handleOk1(e) {
      this.visible1 = false
    },
    handleOk(e) {
      console.log(e)
      addType(this.form).then(res => {
        this.visible = false
        this.success()
        this.refreshTable(this.pageFilter)
      }).catch(e => {
        this.loading = false
        this.$message.warn('请求失败！')
      })
    },
    states(record) {
      console.log(record)
      let data = {
        id: record.id,
        state: record.state == 0 ? 1 : 0
      }
      stateTypr(data).then(res => {
        this.refreshTable(this.pageFilter)
      })
      .catch(e => {
        this.$message.warn('请求失败！')
      })
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable(this.pageFilter)
    },
    refreshTable(val) {
      this.loading = true
      getTypeList(val)
        .then(res => {
          if (res.success) {
            this.pageData = res.result
            this.loading = false
          } else {
            this.loading = false
          }
        })
        .catch(e => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    }
  }
}
</script>

<style scoped>

</style>
